<template>
  <div class="dev-tabs" style="width:1000px;margin: 50px auto;">
    <bf-tabs>
      <bf-tabContent label="asdasd" c-key="1">zxczxcasdas</bf-tabContent>
      <bf-tabContent label="fdgdfgdfg" c-key="2">.,mvcbn,nmvblkj</bf-tabContent>
    </bf-tabs>

    <h4>尺寸</h4>
    <bf-tabs size="mini">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>
    <bf-tabs size="small">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <bf-tabs>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <bf-tabs size="large">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <h4>card</h4>
    <bf-tabs size="mini" type="card">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <bf-tabs size="small" type="card">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <bf-tabs type="card">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <bf-tabs size="large" type="card">
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <h4>更多 and align</h4>
    <bf-tabs size="large" type="card" align="left">
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>
    <bf-tabs size="large" type="card" align="center">
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>
    <bf-tabs size="large" type="card" align="right">
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <h4>border</h4>
    <bf-tabs size="large" type="card" border>
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <h4>border</h4>
    <bf-tabs size="large" type="card" border>
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <h4>自定义颜色</h4>
    <bf-tabs size="large" :nav-style="customNavStyle">
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <Button @click="toggle = !toggle">toggle</Button>
    <h4>自定义颜色</h4>
    <bf-tabs
      v-model="activeTab"
      closable
      size="large"
      type="card"
      border
      :nav-style="customNavStyle"
    >
      <div slot="更多">更多</div>
      <bf-tabContent label="one" c-key="1" disabled>
        <div slot="label">88888888</div>labelzxczxcasdas-content
      </bf-tabContent>
      <bf-tabContent label="two" c-key="2" v-if="toggle">
        <div slot="label">
          <span>9999999999999</span>
        </div>label.,mvcbn,nmvblkj-content
      </bf-tabContent>
      <bf-tabContent label="22222222222" c-key="3">label333-content</bf-tabContent>
      <bf-tabContent label="5666666666" c-key="4" disabled>label444-content</bf-tabContent>
      <bf-tabContent label="3333333333333" c-key="5">label555-content</bf-tabContent>
    </bf-tabs>

    <h4>自定义颜色11</h4>
    <bf-tabs size="large" closable type="card" border :nav-style="customNavStyle">
      <div slot="更多">更多</div>
      <bf-tabContent v-for="item in tabList" :key="item.id" :c-key="item.id">
        <div slot="label">{{item.name}}</div>labelzxczxcasdas-content
      </bf-tabContent>
    </bf-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customNavStyle: {
        defaultBackground: "#f8f8f9",
        activeBackground: "#ffffff",
        defaultColor: "#333333",
        activeColor: "#ff0000",
        defaultBorderColor: "#eeeeee",
        activeBorderColor: "#ff0000",
      },
      tabList: [],
      toggle: false,
      activeTab: "2",
    };
  },
  mounted() {
    this.asyncSetTabList();
  },
  methods: {
    asyncSetTabList() {
      setTimeout(() => {
        this.tabList = [
          {
            id: "0",
            name: "标签0",
          },
          {
            id: "1",
            name: "标签1",
          },
          {
            id: "2",
            name: "标签2",
          },
          {
            id: "3",
            name: "标签3",
          },
        ];
      }, 3000);
    },
  },
};
</script>

<style lang="scss" scoped>
.dev-tabs {
  /*background: #cccccc;*/
  & > * {
    margin-bottom: 10px;
  }
}
</style>
